<template>
  <el-transfer
      v-model="compValue"
      style="text-align: left; display: inline-block;float: left"
      filterable
      :right-default-checked="[2]"
      :titles="['角色列表', '已选角色']"
      :props="defaultProps"
      :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
      :data="compData"
      @change="handleChange"
  >
  </el-transfer>
</template>

<script lang="ts" setup>
//定义组件名称
defineOptions({
  name: "FormRoleTransfer"
});
// @ts-ignore
import {ref, getCurrentInstance, watch, onMounted} from 'vue'

const props = defineProps({
  value: {type: String, required: true},
  disabled: {type: Boolean, required: false},
  userId: {type: Number, required: true, default: 0}
});

const selectValue = ref<any>([]);

const compData = ref<any>([]);
const compValue = ref();
const emit = defineEmits(['update:value'])
const defaultProps = {
  key: 'id',
  label: 'name',
  disabled: true,
}
// @ts-ignore
let {proxy} = getCurrentInstance()

//获取机构select-tree数据
const loadData = () => {
  proxy.$http.tablePost("/user-center/role/findList", {}).then((res: any) => {
    compData.value = res.data.data;
    if (props.userId) {
      findHasRole(props.userId);
    }
  });
}
onMounted(() => {
  loadData();
})

const handleChange = (
    value: [],
    direction: 'left' | 'right',
    movedKeys: string[] | number[]
) => {
  emit("update:value", value.toLocaleString())
}

watch(() => props.userId, (newValue, oldValue) => {
  findHasRole(newValue);
})

const findHasRole = (newValue: number) => {
  proxy.$http.tablePost("/user-center/user/findRoleUser", {
    userId: newValue
  }).then((res: any) => {
    selectValue.value = res.data.data;
    compValue.value = res.data.data;
    emit("update:value", compValue.value.toLocaleString())
  });
}

</script>

<style scoped>

</style>
